* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}
ul {
    list-style: none;
}
/* 让内容与设备一样大(让页面和手机一样大) */
html,
body,
.app {
    width: 100%;
    height: 100%;
}
/* 第3 步 去掉滚动条 */
::-webkit-scrollbar {
    display: none;
}
/* 头部 */
.top {
    /* 固定定位 */
    position: fixed;
    top: 0;
    width: 100%;
    height: 8%;
    background: #000;
    /* 字体颜色 白色 */
    color: #fff;

    /* 设置弹性盒子 */
    display: flex;
    /* 默认  可省略 横向排列的 */
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
    padding: 0 2%;
}
/* 修改字体图标 更多 样式 */
.icon-fanhui::before {
    font-size: 16px;
}
.icon-gengduo::before {
    font-size: 36px;
}
/* 返回文字 样式 */ 
.top p:first-child span:nth-child(2) {
    color: #ccc;
}

/* 中间 */
.main {
    position: fixed;
    top: 8%;
    width: 100%;
    height: 76%;
    background: pink;
    display: flex;
    /* flex-direction: column; */

    /* 第1步：父：overflow:auto */
    overflow: auto;

}
.main li {
    width: 50%;
    /* 第2步 子 0 不放大 0不缩小 auto 让20% 生效 */
    flex: 0 0 auto;
}

/* 底部 */
.bottom {
    position: fixed;
    bottom: 0;
    width: 100%;
    height: 16%;
    background: palegreen;
    display: flex;
    flex-direction: row;
}
/* 下面的 左侧  */
.bottom_left {
    width: 75%;
    height: 100%;
    display: flex;
    flex-direction: column;
}
/* 左侧的 上面 */
.bottom_left_top {
    width: 100%;
    height: 50%;
    background: #fff;
    border-top:1px solid #ccc;
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: space-around;
}
/* 左侧的 下面 */
.bottom_left_bottom {
    width: 100%;
    height: 50%;
    background: #333;
    color: #fff;
    display: flex;
    flex-direction: row;
    justify-content: space-around;
    align-items: center;
}
.bottom_left_bottom li {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}
.bottom_left_bottom li:hover {
    color: #4bbdcb;
}

/* 下面的 右侧 */
.bottom_right {
    width: 25%;
    height: 100%;
    background: #4bbdcb;
}